今天進入會員中心，首先是要做出會員資料，讓使用者可以修改名稱、上傳照片以及修改密碼的頁面，花了一點時間在製作畫面，功能面的部分只有做到圖片預覽。

這邊先將user的資料渲染到畫面上，在修改一下上傳照片的按鈕

import { auth } from "../utils/firebase"
function Member(){
    const user = auth.currentUser
    return (
        <section className="info_section">
            <div className="container">
                <div className="wrap animatable fadeInUp">
                    <div className="card">
                        <div className="card_upper">
                            <div className="imgwrap">
                                <img src="" alt=""/>
                            </div>
                            <div className="name">{user.displayName}</div>
                        </div>
                        <ul className="card_lower">
                            <li>
                                <div className="info_title">帳號</div>
                                <div className="info_conent">{user.email}</div>
                            </li>
                        </ul>
                        <div className="editbtnwrap">
                            <label className="btn_edit" htmlFor="upload" >上傳照片</label>
                            <input type="file" accept="image/*" id="upload" 
                                onChange={(e)=>setImageUpload(e.target.files[0])}
                            />
                        </div>
                    </div>
                    <form action="">
                        <div className="form-group">
                            <label className="form-label" htmlFor="name">使用者名稱<span>*</span></label>
                            <input className="form-input" id="name" type="text" placeholder="請輸入名稱" value={displayName} onChange={(e)=>{setDisplayName(e.target.value)}}/>
                            <small>必填</small>
                        </div>
                        <div className="form-group">
                            <label className="form-label" htmlFor="password">修改密碼</label>
                            <input className="form-input" id="password" type="text" placeholder="請輸入密碼" value={password} onChange={(e)=>{setPassword(e.target.value)}}/>
                            <small>必填</small>
                        </div>
                        <div className="btnwrap">
                            <a className="btn blue" href="#">儲存變更 <span></span></a>
                        </div>
                    </form>

                </div>
            </div>
        </section>
    )
}

下一步是圖片預覽，與先前在文章編輯頁一樣，把當時的作法複製過來，不一樣的地方是將url塞入photoURL，這個變數是為了之後要在更新會員資料時使用，明後天應該就會使用到的!!

import { auth, storage } from "../utils/firebase"
import {ref, uploadBytes, getDownloadURL} from "firebase/storage";
function Member(){
    const user = auth.currentUser
    const [imageUpload, setImageUpload] = useState(null)
    const previewImg = imageUpload? URL.createObjectURL(imageUpload) : ""
    const [photoURL,setPhotoURL] = useState()
    function onSubmit(){
        const imagesRef = ref(storage, 'user-images/' + user.uid);
        const metadata = {
            contentType: imageUpload.type,
        };
        uploadBytes(imagesRef, imageUpload,metadata).then((snapshot) => {
            return getDownloadURL(snapshot.ref)
        }).then((url)=>{
            setPhotoURL(url)
        });
    }
    return (
				//省略其他與圖片不相關的code
        <div className="card_upper">
            <div className="imgwrap">
                <img src={previewImg} alt=""/>
            </div>
        </div>
        <div className="editbtnwrap">
            <label className="btn_edit" htmlFor="upload" >上傳照片</label>
            <input type="file" accept="image/*" id="upload" 
                onChange={(e)=>setImageUpload(e.target.files[0])}
            />
        </div>
    
        <div className="btnwrap">
            <a className="btn blue" href="#" onClick={onSubmit}>儲存變更 <span></span></a>
        </div>
    )
}
export default Member

今天時間不多就只能先到這，明日再續。